<!--
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2021-12-10 06:27:38
 * @LastEditors: GGB
 * @LastEditTime: 2021-12-11 08:44:45
-->
<template>
  <div :class="{ active: isActive }" @click="navigate">{{ route.name }}</div>
</template>

<script>
import { RouterLink, useLink } from "vue-router";
export default {
  props: {
    ...RouterLink.props,
    inactiveClass: String,
  },
  setup(props) {
    const { route, isActive, navigate } = useLink(props);
    // console.log(route, href, isActive, isExactActive, navigate)

    return {
      route,
      isActive,
      navigate,
    };
  },
};
</script>

<style scoped>
.active {
  background-color: red;
}
</style>
